{% extends "base.html" %}
{% load i18n %}

{% block headtitle %}{% trans "Standby" %}{% endblock %}

{% block head %}
<style>
@-webkit-keyframes glowRed {
  from {
    -webkit-box-shadow: rgba(255, 0, 0, 0) 0 0 0;
  }
  50% {
    -webkit-box-shadow: rgba(255, 0, 0, 1) 0 0 25px 3px;
  }
  to {
    -webkit-box-shadow: rgba(255, 0, 0, 0) 0 0 0;
  }
}
@-moz-keyframes glowRed {
  from {
    -moz-box-shadow: rgba(255, 0, 0, 0) 0 0 0;
  }
  50% {
    -moz-box-shadow: rgba(255, 0, 0, 1) 0 0 25px 3px;
  }
  to {
    -moz-box-shadow: rgba(255, 0, 0, 0) 0 0 0;
  }
}
@-ms-keyframes glowRed {
  from {
    -ms-box-shadow: rgba(255, 0, 0, 0) 0 0 0;
  }
  50% {
    -ms-box-shadow: rgba(255, 0, 0, 1) 0 0 25px 3px;
  }
  to {
    -ms-box-shadow: rgba(255, 0, 0, 0) 0 0 0;
  }
}
@-o-keyframes glowRed {
  from {
    -o-box-shadow: rgba(255, 0, 0, 0) 0 0 0;
  }
  50% {
    -o-box-shadow: rgba(255, 0, 0, 1) 0 0 25px 3px;
  }
  to {
    -o-box-shadow: rgba(255, 0, 0, 0) 0 0 0;
  }
}
html, body {
	height: 100%;
	overflow: hidden;
}
body {
  background: -moz-radial-gradient(center center, circle, white 200px, #ddd 400px, #222 2000px);
  background: -webkit-radial-gradient(center center, circle, white 200px, #ddd 400px, #222 2000px);
  background: -ms-radial-gradient(center center, circle, white 200px, #ddd 400px, #222 2000px);
  background: -o-radial-gradient(center center, circle, white 200px, #ddd 400px, #222 2000px);
  background: radial-gradient(center center, circle, white 200px, #ddd 400px, #222 2000px);
}
body .page {
	height: 80%;
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  display: -moz-box;
  -moz-box-align: center;
  -moz-box-pack: center;
}
header.main {
	display: none;
}
.page h1, .page h3 {
	margin: 0;
}
h1 {
	border-top: 1px solid #ccc;
	font-size: 70px;
	line-height: 1.2;
	padding-top: 10px;
	position: relative;
}
h3 {
	line-height: 1.8;
}
.record {
	background-color: red;
	border-radius: 50%;
	display: inline-block;
  width: 20px;
  height: 20px;
  -webkit-animation-name: glowRed;
  -moz-animation-name: glowRed;
  -o-animation-name: glowRed;
  -ms-animation-name: glowRed;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-duration: 4s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-duration: 4s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
  position: absolute;
  top: 25px;
  right: 95px;
  opacity: 0.8;
}
.watermark {
	display: none;
}
#timer {
	font-weight: 600;
	-webkit-transition: all 60s linear;
	-mos-transition: all 60s linear;
	-o-transition: all 60s linear;
	-ms-transition: all 60s linear;
	transition: all 60s linear;
}
#timer.near {
	color: red;
}
</style>
{% endblock %}

{% block body %}
<div>
  <img src="/static/images/site_title.png" width="388" height="320">
  <hgroup style="text-align: center;">
  	<h1>LIVE <span class="record"></span></h1>
    <h3>Starts in <span id="timer">0:00</span><span> minutes</span></h3>
  </hgroup>
</div>
<script>
Modernizr.cssgradients && document.body.classList.remove('pattern-bg');

// Countdown. startIn(5) is 5 minutes.
function startIn(minutes) {
	if (!minutes) {
		return;
	}
  var timer = document.querySelector('#timer');
  var units = timer.nextSibling;

  var end = new Date(Date.now() + minutes * 60 * 1000);

  var id = setInterval(function() {
    var now = new Date();
    var delta = end - now;
    var toc = new Date(delta);

    if (delta <= 0) {
    	clearInterval(id);
    	timer.parentElement.innerHTML = 'NOW!'
    } else {
    	var seconds = toc.getSeconds();
    	timer.textContent = toc.getMinutes() + ':' + (seconds < 10 ? '0' + seconds : seconds);
    	if (toc.getMinutes() >= 1) {
    		units.textContent = ' minutes';
    	} else {
    		if (!timer.classList.contains('near')) {
    			timer.classList.add('near');
    		}
    		units.textContent = ' seconds';
    	}
    }
  }, 1000);
}
</script>
{% endblock %}
